let ctx;

let canvas

class xView {
  padding = {left: 0, top: 0, right: 0, bottom: 0}
  x = 0;
  y = 0;
  width = 10;
  height = 10;
  radius = 0
  backgroundColor = "orange";


  shadowOffsetX = 0
  shadowOffsetY = 0
  shadowBlur = 0
  shadowColor = 'rgba(0,0,0,0.25)'


  cx = 0
  cy = 0


  constructor(x,y,width,height) {
    if (x) this.x = x
    if (y) this.y = y
    if (width) this.width = width
    if (height) this.height = height
  }


  // parent = null


  add(view) {
    view.parent = this


    const drawX = this.cx + this.padding.left
    const drawY = this.cy + this.padding.top


    view.draw(drawX, drawY);


    view.cx = this.cx + this.padding.left + view.x
    view.cy = this.cy + this.padding.top + view.y
    console.log('this.y, thispadding.top,view.y', this);
  }
}


class xRect extends xView {


  constructor(x,y,width,height) {
    super(x,y,width,height);
  }


  draw(px = 0, py = 0) {


    if (this.shadowBlur) {
      ctx.shadowOffsetX = this.shadowOffsetX
      ctx.shadowOffsetY = this.shadowOffsetY
      ctx.shadowBlur = this.shadowBlur
      ctx.shadowColor = this.shadowColor
    }


    console.log('draw', px, py, this.x, this.y, this);
    ctx.fillStyle = this.backgroundColor;
    ctx.beginPath()
    ctx.roundRect(px + this.x, py + this.y, this.width, this.height, this.radius)
    ctx.fill()
  }
}


class xCanvas extends xView {
  type = 'small' // small medium large
  constructor(id, type) {
    super();
    canvas = document.getElementById(id);
    
    if (type === 'small') {
      canvas.width = "510";
      canvas.height = "510";
    }
    if(type === 'medium') {
      canvas.width = "1092";
      canvas.height = "510";
    }
    if(type === 'large') {
      canvas.width = "1092";
      canvas.height = "1092";
    }
    
    ctx = canvas.getContext("2d");
    console.log('ctx', ctx);
  }
}


class xText extends xView {
  width = undefined;
  align = 'left' // left center right
  textColor = 'black'
  fontSize = '36'
  fontFamily = ''
  font = null
  constructor(text) {
    super();
    this.text = text;
  }


  draw(px, py) {
    ctx.fillStyle = this.textColor
    if (this.font) {
      ctx.font = this.font
    }else {
      ctx.font = this.fontSize + 'px Arial'
    }
    
    ctx.textBaseline = "hanging";
    ctx.textAlign = this.align
    ctx.fillText(this.text, px + this.x, py + this.y, this.width);
  }
}


class xImage extends xView {
  src = "./pie.png";
  constructor(src) {
    super();
    this.image = new Image();
    this.image.src = "./pie.png";
    this.src = src;
  }


  draw(px, py) {
    this.image.onload = () => {
      ctx.drawImage(this.image, px + this.x, py + this.y);
    };
  }
}


class xCircle extends xView {
  radius = 10;


  draw(px = 0, py = 0) {
    ctx.shadowColor = "#bebebe";
    ctx.shadowOffsetX = 20;
    ctx.shadowOffsetY = 20;
    ctx.shadowBlur = 60;


    //       background: #e0e0e0;
    // box-shadow:  20px 20px 60px #bebebe,
    //              -20px -20px 60px #ffffff;


    ctx.fillStyle = this.backgroundColor;
    ctx.beginPath();
    console.log("this.x", this.x);
    console.log("this.y", this.y);
    console.log("this.radius", this.radius);
    ctx.arc(
      px + this.x + this.radius * 0.5,
      py + this.y + this.radius * 0.5,
      this.radius,
      0,
      Math.PI * 2
    );
    ctx.fill();
  }
}


function getContext() {
  return ctx
}


const Draw = {
  getContext: getContext,
  Canvas: xCanvas,
  View: xView,
  Rect: xRect,
  Circle: xCircle,
  Image: xImage,
  Text: xText,
  
};



const draw = new Draw.Canvas('canvas', 'medium')


// const ctx = Draw.getContext()


ctx.save()


  const rect = new Draw.Rect(50, 50, 992, 326)
  rect.radius = 50
  rect.padding.left = 50
  rect.padding.top = 50
  rect.backgroundColor =  'rgba(255, 255, 255, 0)'
  rect.shadowBlur = 30
  draw.add(rect)


  ctx.restore()


  function getWeek(week, day) {


    let data = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri']


    return data.map((item, index) => {


      return {
        title: item,
        day: day - (week - index) + 1,
        isCurrent: (index + 1) === week
      }
    })
  }


  const currentDate = new Date()


  const currentDay = currentDate.getDate()
  const currentWeek = currentDate.getDay()


  const data = getWeek(currentWeek, currentDay)


 

  data.forEach((item, index) => {
    const container = new Draw.Rect(index * 178.4, 0, 178.4, 230)
    container.backgroundColor =  'rgba(255, 255, 255, 0)'
    rect.add(container)


    const dateCon = new Draw.Rect(19, 0, 140, 230)


    dateCon.radius = 40


    if (item.isCurrent) {
      dateCon.backgroundColor = '#352B2B'
    } else {
      dateCon.backgroundColor = 'white'
    }


    container.add(dateCon)


    const weekNum = new Draw.Text(item.title)
    weekNum.align = 'center'
    weekNum.x = 70
    weekNum.y = 49
weekNum.font = '36px deyihei'
    if (item.isCurrent) {
      weekNum.textColor = 'white'
    } else {
      weekNum.textColor = 'black'
    }


    dateCon.add(weekNum)


    const dateNum = new Draw.Text(item.day)
    dateNum.align = 'center'
    dateNum.x = 70
    dateNum.y = 114
//     dateNum.fontSize = 64
dateNum.font = 'bold 64px deyihei'

    if (item.isCurrent) {
      dateNum.textColor = 'white'
    } else {
      dateNum.textColor = 'black'
    }
    dateCon.add(dateNum)


  });



 let tip = '距离周末还有' + (5 - currentWeek) + '天'


  const countDonw = new Draw.Text(tip)
  countDonw.x = 546
  countDonw.y = 416
  countDonw.align = 'center'
    countDonw.textColor = 'white'
    countDonw.font = '50px deyihei'
     draw.add(countDonw)

//   const fontFace = new FontFace('deyihei', "url(https://gitee.com/danglao/scriptable/blob/master/deyihei.otf)")



//   fontFace.load().then((font) => {
//     document.fonts.add(font)
//     countDonw.font = '50px deyihei'
//     draw.add(countDonw)
//   })